<html>
<head>
    <title>VXP Client-Side Test</title>
    <style>
        #summary
        {
            margin:0px 0px 10px 5px;
            font-weight:bold;
        }

        #result div span
        {
            margin-left:5px;
        }

        span.timing
        {
            color:gray;
        }

        div.success span.result
        {
            color:green;
        }

        div.failed span.result
        {
            color:red;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="js/xpath-strings.js"></script>
    <script type="text/javascript">
        $(document).ready(init);

        function init()
        {
            window.stopTest=true;
            $("#XPathCount").html(XPATH.length);
        }

        function onStartStop(btn)
        {
            window.stopTest=!window.stopTest;

            if (!window.stopTest)
            {
                btn.innerHTML="Stop!";
                $("#result").html("");
                testXPath(0,0);
            }
            else
            {
                btn.innerHTML="Start!";
                window.stopTest=true;
            }
        }


        function testXPath(counter,totalTime)
        {
            var query=XPATH[counter];
            var start=new Date();

            $.ajax({
                    url:"parse.php",
                    dataType:'json',
                    data:{
                            x:query
                         },
                    success:  function(result)
                              {
                                var end=new Date();
                                var timing=end.valueOf()-start.valueOf();

                                if (result.success==1)
                                    $("#result").append("<div class='success'><span class='result'>[SUCCESS]</span><span class='timing'>["+timing+" ms]</span><span class='query'>"+query+"</span></div>");
                                else
                                    $("#result").append("<div class='failed'><span class='result'>[FAILED]</span><span class='timing'>["+timing+" ms]</span><span>"+query+"</span><span class='message'>["+result.message+"]</span></div>");

                                if (!window.stopTest)
                                    setTimeout(function()
                                    {
                                       if (counter<XPATH.length-1)
                                           testXPath(counter+1,totalTime+timing);
                                       else
                                           testFinished(counter+1,totalTime+timing);
                                    }, 500);
                                else
                                    testFinished(counter+1,totalTime+timing);
                              }
                  });


        }

        function testFinished(counter,totalTime)
        {
            console.log(counter,totalTime);
            $("#summary").html("Average time per query: "+(totalTime/counter)+" ms");
        }


    </script>
</head>
<body>
    <h3>VXP Test Page (client-side)</h3>
    <p>This test page will send <span id="XPathCount"></span> XPath 1.0 queries to the server, one at a time. The queries were obtained from <a href="http://www.w3.org/2010/02/qt-applets/xpath21/#resources" target="_blank">W3C</a> (<a href="http://www.w3.org/2010/02/qt-applets/xgrammar_src.zip" target="_blank">xgrammar_src.zip:/xgrammar/grammar/tests/pathx1-tests.xml</a>).<br/>The server uses the <em>vxp</em> extension for PHP to parse XPath queries in PHP and return the syntax tree (not shown). The queries will not be evaluated.<br/>The results will be displayed below. At the end of the test, the average time per query will be displayed under this paragraph.<br/>The timings displayed include the time it took the browser to send the AJAX request to the server and read the response.<br/>It is much longer than the time it took <em>vxp</em> to parse the query, but it might nevertheless be useful to know how long the roundtrip takes.</p>
    <p>To start the test, please click the following button: 
        <button id="btnStartStop" onclick="onStartStop(this);">Start!</button>
    </p>
    <div id="summary"></div>
    <div id="result">
    </div>
</body>
</html>
